<!--
 * @Description: 交易管理
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-02-12
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-02-13
-->

<script lang="ts" setup>
  import { onMounted, reactive } from 'vue'

  import { requestDeletePosition, requestPositionList } from '/@/api/business/company/position'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  import Detail from './components/Detail.vue'

  /** 搜索条件 */
  const searchParam = reactive({
    /** 交易类型 */
    type: null,
    /** 币种 */
    category: null,
    /** 交易状态 */
    status: null,
    /** 关键字搜索 */
    keyword: '',
    /** 交易日期 */
    time: [],
  })

  /** 搜索条件下拉项 */
  const searchOptions = reactive({
    /** 交易类型 */
    // type: Object.entries(accountStatusDesc).map((item) => ({ value: item[0], label: item[1] })),
    type: [
      { value: 0, label: '全部' },
      { value: 1, label: '发送' },
      { value: 2, label: '接收' },
    ],
    category: [
      { value: 0, label: '全部' },
      { value: 1, label: 'BTC' },
      { value: 2, label: 'ETH' },
    ],
    status: [
      { value: 0, label: '全部' },
      { value: 1, label: '待处理' },
      { value: 2, label: '成功' },
      { value: 3, label: '失败' },
    ],
  })

  /** 表格列配置 */
  const columns = [
    { title: '账号', dataIndex: 'account' },
    { title: '类型', key: 'type' },
    { title: '币种', key: 'category' },
    { title: '数量', dataIndex: 'count' },
    { title: '状态', key: 'status' },
    { title: '手续费', dataIndex: 'fee' },
    { title: '交易时间', dataIndex: 'time' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<PositionListTypes.IRequest, PositionListTypes.IResponse[]>(searchParam, requestPositionList) //TODO

  // TODO
  setTimeout(() => {
    dataList.value = [
      { account: '19200****86', type: 1, category: 2, count: 1, status: 1, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 2, category: 2, count: 8, status: 1, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 1, category: 2, count: 8, status: 2, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 1, category: 1, count: 8, status: 3, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 1, category: 2, count: 1, status: 3, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 2, category: 1, count: 1, status: 3, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 1, category: 1, count: 1, status: 3, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 2, category: 2, count: 8, status: 2, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 2, category: 1, count: 8, status: 2, fee: 0, time: '2024.08.29 11:20:33' },
      { account: '19200****86', type: 1, category: 2, count: 1, status: 1, fee: 0, time: '2024.08.29 11:20:33' },
    ]
  }, 1500)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.type = null
    searchParam.category = null
    searchParam.status = null
    searchParam.keyword = ''
    searchParam.time = []
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /** 详情弹窗 */
  const modalDetail = reactive({
    visible: false,
    positionId: NaN,
    positionName: '',
    success: () => queryList(),
  })

  /**
   * 交易详情
   * @param record 职位
   */
  const detail = (record: PositionListTypes.IResponse) => {
    modalDetail.visible = true
    modalDetail.positionId = record.positionId
    modalDetail.positionName = record.positionName
  }
</script>

<template>
  <div class="ssc-list notice-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="5">
          <a-form-item label="交易类型">
            <a-select v-model:value="searchParam.type" allowClear :options="searchOptions.type" placeholder="请选择" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="币种">
            <a-select v-model:value="searchParam.category" allowClear :options="searchOptions.category" placeholder="请选择" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="交易状态">
            <a-select v-model:value="searchParam.status" allowClear :options="searchOptions.status" placeholder="请选择" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="关键字搜索">
            <a-input v-model:value="searchParam.keyword" @press-enter="queryList" allowClear :maxlength="20" placeholder="账号/地址" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="交易日期">
            <a-range-picker v-model:value="searchParam.time" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">交易管理</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'type'">
            <span>
              <span v-if="record.type === 1" style="color: green">发送</span>
              <span v-else-if="record.type === 2" style="color: #d66">接收</span>
            </span>
          </template>
          <template v-if="column.key === 'category'">
            <span>
              <span v-if="record.category === 1">BTC</span>
              <span v-else-if="record.category === 2">ETH</span>
            </span>
          </template>
          <template v-else-if="column.key === 'status'">
            <span>
              <a-tag v-if="record.status === 1" color="#aaa">待处理</a-tag>
              <a-tag v-else-if="record.status === 2" color="green">成功</a-tag>
              <a-tag v-else-if="record.status === 3" color="red">失败</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a @click="detail(record)">交易详情</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <div class="modal">
      <Detail v-model:visible="modalDetail.visible" :position-id="modalDetail.positionId" @success="modalDetail.success" />
    </div>
  </div>
</template>

<style lang="less" scoped></style>
